<template>
  <div class="app-container">
    <!-- 条件查询 -->
    <el-card class="box-card">
      <el-form :inline="true" :model="query" size="mini">
        <el-form-item label="作者">
          <el-input v-model.trim="query.username" clearable placeholder="请输入作者昵称"/>
        </el-form-item>
        <el-form-item label="文章标题:">
          <el-input v-model.trim="query.title" clearable placeholder="请输入文章标题"/>
        </el-form-item>
        <el-form-item label="文章ID">
          <el-input v-model.trim="query.id" clearable placeholder="请输入文章ID"/>
        </el-form-item>
        <el-form-item label="作者ID">
          <el-input v-model.trim="query.userId" clearable placeholder="请输入作者ID"/>
        </el-form-item>
        <el-form-item label="经历主人">
          <el-input v-model.trim="query.masterName" clearable placeholder="请输入经历主人名"/>
        </el-form-item>
        <el-form-item label="文章状态">
          <el-select v-model="query.status" clearable style="width: 120px">
            <el-option label="待审核" :value="0"/>
            <el-option label="审核通过" :value="1"/>
            <el-option label="审核未通过" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="是否发布">
          <el-select v-model="query.publish" clearable style="width: 120px">
            <el-option label="草稿" :value="0"/>
            <el-option label="发布" :value="1"/>
          </el-select>
        </el-form-item>
        <el-form-item label="是否推荐">
          <el-select v-model="query.recommend" clearable style="width: 120px">
            <el-option label="正常" :value="0"/>
            <el-option label="推荐" :value="1"/>
          </el-select>
        </el-form-item>
        <el-form-item label="是否原创">
          <el-select v-model="query.original" clearable style="width: 120px">
            <el-option label="原创" :value="0"/>
            <el-option label="转载" :value="1"/>
            <el-option label="翻译" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="文章分类 :">
          <el-select v-model="query.categoryPid" clearable filterable style="width:120px">
            <el-option
              v-for="item in categoryOptions"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button v-permission="'article:search'" icon="el-icon-search" type="primary" @click="queryData">查询
          </el-button>
          <el-button v-permission="'article:search'" icon="el-icon-refresh" @click="reload">重置</el-button>
        </el-form-item>
        <el-form-item label="日期范围">
          <el-date-picker
            clearable
            v-model="query.begin"
            placeholder="开始时间"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="-">
          <el-date-picker
            v-model="query.end"
            clearable
            placeholder="结束时间"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-button v-permission="'article:search'" icon="el-icon-search" type="primary" @click="queryData">查询
          </el-button>
          <el-button v-permission="'article:search'" icon="el-icon-refresh" @click="reload">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表格显示列表数据 -->
    <!-- height="750" 为了固定表头 -->
    <el-table
      :data="list"
      stripe
      border
      height="650"
    >
      <el-table-column label="序号" width="70" fixed align="center">
        <template slot-scope="scope">
          <!--  page.current 当前页码；page.size 每页记录数 -->
          {{ (current - 1) * size + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="username" label="作者" align="center"/>
      <el-table-column align="center" prop="avatar" label="头像" width="55">
        <template slot-scope="scope">
          <el-image
            :src="scope.row.avatar"
            :preview-src-list="[scope.row.avatar]"
          />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="文章标题" width="450"/>
      <el-table-column prop="categoryParentName" label="一级分类"/>
      <el-table-column prop="categoryName" label="二级分类" width="120" align="center"/>
      <!-- 是否推荐：(0 正常；1 推荐) -->
      <el-table-column prop="recommend" label="是否推荐" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.recommend == 0">正常</el-tag>
          <el-tag v-if="scope.row.recommend == 1" type="success">推荐</el-tag>
        </template>
      </el-table-column>
      <!-- 状态：(0 待审核；1 审核通过；2 审核未通过；) -->
      <el-table-column align="center" prop="status" label="文章状态" width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0" type="">待审核</el-tag>
          <el-tag v-if="scope.row.status == 1" type="success">审核通过</el-tag>
          <el-tag v-if="scope.row.status == 2" type="info">审核未通过</el-tag>
        </template>
      </el-table-column>
      <!-- 是否发布：（0 草稿；1 发布） -->
      <el-table-column prop="publish" label="是否发布" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.publish == 0" type="info">草稿</el-tag>
          <el-tag v-if="scope.row.publish == 1" type="success">发布</el-tag>
        </template>
      </el-table-column>
      <!-- fail '审核不通过的原因：(0 无；1 作品侵权；2 涉嫌违法犯法；3 内容不雅；4 骚扰谩骂；5 虚假宣传；6 低质灌水；7 不符合当前分类 )', -->
      <el-table-column align="center" prop="fail" label="审核状态" width="130">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.fail == 0" type="success">无</el-tag>
          <el-tag v-if="scope.row.fail == 1" type="danger">作品侵权</el-tag>
          <el-tag v-if="scope.row.fail == 2" type="danger">涉嫌违法</el-tag>
          <el-tag v-if="scope.row.fail == 3" type="danger">内容不雅</el-tag>
          <el-tag v-if="scope.row.fail == 4" type="danger">骚扰谩骂</el-tag>
          <el-tag v-if="scope.row.fail == 5" type="danger">虚假宣传</el-tag>
          <el-tag v-if="scope.row.fail == 6" type="danger">低质灌水</el-tag>
          <el-tag v-if="scope.row.fail == 7" type="danger">不符合当前分类</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="updateTime" label="更新时间" width="160px"/>
      <el-table-column prop="masterName" label="经历主人" align="center"/>
      <el-table-column align="center" prop="masterUrl" label="主人" width="55">
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.masterUrl"
            :src="scope.row.masterUrl"
            :preview-src-list="[scope.row.masterUrl]"
          />
        </template>
      </el-table-column>
      <!-- 是否原创：(0 原创；1 转载； 2 翻译) -->
      <el-table-column align="center" prop="original" label="是否原创">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.original == 0" type="success">原创</el-tag>
          <el-tag v-if="scope.row.original == 1" type="info">转载</el-tag>
          <el-tag v-if="scope.row.original == 2" type="">翻译</el-tag>
        </template>
      </el-table-column>
      <!-- 可否转载：( 0 可转转；1 转载请注明出处；2 未经作者授权，禁止转载 ) -->
      <el-table-column align="center" prop="refuse" label="可否转载" width="180px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.refuse == 0" type="success">可转转</el-tag>
          <el-tag v-if="scope.row.refuse == 1">转载请注明出处</el-tag>
          <el-tag v-if="scope.row.refuse == 2" type="warning">未经作者授权，禁止转载</el-tag>
        </template>
      </el-table-column>
      <!-- 是否关闭评论功能：(0 开启；1 关闭) -->
      <el-table-column prop="commentClose" label="可否留言" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.commentClose == 0" type="success">开启</el-tag>
          <el-tag v-if="scope.row.commentClose == 1" type="info">关闭</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="viewCount" label="浏览总数" align="center"/>
      <el-table-column prop="thumbCount" label="点赞总数" align="center"/>
      <el-table-column prop="commentCount" label="留言总数" align="center"/>
      <el-table-column prop="collectionCount" label="收藏总数" align="center"/>
      <el-table-column prop="version" label="版本" align="center"/>
      <el-table-column prop="id" label="文章ID" width="180" align="center"/>
      <el-table-column prop="userId" label="作者ID" width="180px" align="center"/>
      <el-table-column align="center" prop="createTime" label="创建时间" width="160px"/>
      <el-table-column align="center" label="操作" min-width="380px" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-permission="'article:audit'"
            size="mini"
            type="primary"
            @click="openAudit(scope.row.id)"
          >审核
          </el-button>
          <!-- 2、查看文章详情  -->
          <el-button v-permission="'article:view'" size="mini" @click="openView(scope.row.id)">查看
          </el-button>
          <!-- 3、设置文章为推荐 -->
          <el-button
            v-permission="'article:audit'"
            :disabled="scope.row.recommend == 1"
            size="mini"
            @click="doRecommend(scope.row.id)"
          >推荐
          </el-button>
          <!-- 4、取消推荐文章 v-permission="'article:audit'" -->
          <el-button
            v-permission="'article:audit'"
            :disabled="scope.row.recommend == 0"
            type="info"
            size="mini"
            @click="noRecommend(scope.row.id)"
          >取消推荐
          </el-button>
          <!-- 5、根据ID删除文章  -->
          <el-button v-permission="'article:delete'" type="danger" size="mini" @click="handleDelete(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      align="center"
      background
      :current-page="current"
      :page-sizes="[10, 20,30,50,100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 审核文章子组件 -->
    <audit
      :title="audit.title"
      :visible="audit.visible"
      @remoteClose="remoteClose"
      :id="audit.id"
      :isAudit="audit.isAudit"
    />
  </div>
</template>
<script>
import api from '@/api/article'
import Audit from './audit' // 审核子组件

// 文章一级分类实体类型
const categoryOptions = [
  { code: 1, name: '人物经历' },
  { code: 2, name: '信息共享' },
  { code: 3, name: '文化艺术' },
  { code: 4, name: '思想觉悟' },
  { code: 5, name: '我之宣言' },
  { code: 6, name: '经历送别' },
  { code: 7, name: '经历服务' }
]

export default {
  name: 'Article',
  components: {
    Audit
  },
  data() {
    return {
      list: [],
      current: 1,
      size: 10,
      total: 0,
      query: {},
      categoryOptions, // 文章一级分类
      // 审核文章子组件对象属性
      audit: {
        title: '',
        visible: false,
        id: null,
        isAudit: true
      }
    }
  },
  created() {
    // 文章数据列表
    this.fetchData()
  },
  methods: {
    // 获取条件分页列表数据
    async fetchData() {
      const { data } = await api.getList(this.current, this.size, this.query)
      this.list = data.records
      this.total = Number(data.total)
    },
    // 切换每页显示多少条记录
    handleSizeChange(size) {
      this.size = size
      this.fetchData()
    },
    // 切换当前页码
    handleCurrentChange(current) {
      this.current = current
      this.fetchData()
    },
    // 条件查询
    queryData() {
      this.current = 1
      this.fetchData()
    },
    // 重置表单
    reload() {
      this.query = {}
      this.fetchData()
    },
    // 设置文章为推荐
    doRecommend(articleId) {
      this.$confirm('确定要推荐此文章吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送请求
        api.recommendYes(articleId).then(response => {
          if (response.code === 200) {
            this.fetchData()
            this.$message.success(response.message)
          } else {
            this.$message.error(response.message)
          }
        })
      }).catch(() => {
      })
    },
    // 取消推荐文章
    noRecommend(id) {
      this.$confirm('确定取消推荐此文章吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送请求
        api.recommendNo(id).then(response => {
          if (response.code === 200) {
            this.fetchData()
            this.$message.success(response.message)
          } else {
            this.$message.error(response.message)
          }
        })
      }).catch(() => {
      })
    },
    // 打开审核窗口
    openAudit(id) {
      this.audit.id = id
      this.audit.isAudit = true
      this.audit.title = '审核文章'
      this.audit.visible = true
    },
    // 关闭审核文章窗口
    remoteClose() {
      this.audit.visible = false
      this.fetchData()
    },
    // 查看文章
    openView(id) {
      this.audit.id = id
      // false 为查看文章
      this.audit.isAudit = false
      this.audit.title = '查看文章'
      this.audit.visible = true
    },
    // 根据ID删除文章
    handleDelete(id) {
      this.$confirm('确定要删除此文章吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送请求
        api.deleteById(id).then(response => {
          if (response.code === 200) {
            this.fetchData()
            this.$message.success(response.message)
          } else {
            this.$message.error(response.message)
          }
        })
      }).catch(() => {
      })
    }
  }
}
</script>
<style scoped>
.el-image {
  border-radius: 4px;
}
.el-pagination {
  margin: 20px 0 50px;
}

</style>
